import { View, Text, Input } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useState, useEffect } from 'react'
import { registerAccountApi } from '../../api/handleUserAccount'
import HeadBar from '../../components/HeadBar/HeadBar'
import './RegisterAccount.scss'

const RegisterAccount = () => {
  const [formState, setFormState] = useState({
    userName: '',
    password: '',
    assertPassword: '',
    phone: '',
    question1: '',
    answer1: '',
    question2: '',
    answer2: ''
  })

  const [isRegisterSuccess, setIsRegisterSuccess] = useState(false)
  const [timeCount, setTimeCount] = useState(3)

  const handleInput = (key, value) => {
    setFormState({ ...formState, [key]: value })
  }

  const checkConsitency = (password, assertPassword) => {
    return password === assertPassword
  }

  const checkPhone = (phone) => {
    let regex = /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/
    return regex.test(phone)
  }

  const onSubmit = async () => {
    if (!formState.userName) {
      Taro.showToast({ title: '请输入用户名', icon: 'none' })
      return
    }
    if (!formState.password || formState.password.length < 6) {
      Taro.showToast({ title: '密码长度不小于6位', icon: 'none' })
      return
    }
    if (!checkConsitency(formState.password, formState.assertPassword)) {
      Taro.showToast({ title: '密码不一致，请重新输入', icon: 'none' })
      return
    }
    if (!checkPhone(formState.phone)) {
      Taro.showToast({ title: '请输入合法手机号', icon: 'none' })
      return
    }
    if (!formState.question1 || !formState.answer1 || !formState.question2 || !formState.answer2) {
      Taro.showToast({ title: '请填写完整的安全问题', icon: 'none' })
      return
    }

    let res = await registerAccountApi({
      userName: formState.userName,
      password: formState.password,
      phone: formState.phone,
      randomQuestion: [
        {
          question: formState.question1,
          answer: formState.answer1
        },
        {
          question: formState.question2,
          answer: formState.answer2
        }
      ]
    })

    if (res) {
      setIsRegisterSuccess(true)
      const interval = setInterval(() => {
        setTimeCount((prev) => prev - 1)
      }, 1000)
      setTimeout(() => {
        clearInterval(interval)
        goLogin()
      }, 3000)
    }
  }

  const goLogin = () => {
    Taro.navigateTo({ url: '/pages/login/login' })
  }

  return (
    <View className='registerAccount'>
      <HeadBar title='注册' />
      {!isRegisterSuccess ? (
        <View>
          <View className='form'>
            <View className='form-item'>
              <Text>用户名</Text>
              <Input placeholder='请输入用户名' value={formState.userName} onInput={(e) => handleInput('userName', e.detail.value)} />
            </View>
            <View className='form-item'>
              <Text>密码</Text>
              <Input type='password' placeholder='请输入密码' value={formState.password} onInput={(e) => handleInput('password', e.detail.value)} />
            </View>
            <View className='form-item'>
              <Text>确认密码</Text>
              <Input type='password' placeholder='请再次输入密码' value={formState.assertPassword} onInput={(e) => handleInput('assertPassword', e.detail.value)} />
            </View>
            <View className='form-item'>
              <Text>手机号</Text>
              <Input placeholder='请输入手机号' value={formState.phone} onInput={(e) => handleInput('phone', e.detail.value)} />
            </View>
            <View style={{ color: '#fa4f4b', marginBottom: '5px' }}>为方便密码找回，请填写以下内容！</View>
            <View className='form-item'>
              <Text>随机问题1</Text>
              <Input placeholder='请输入问题' value={formState.question1} onInput={(e) => handleInput('question1', e.detail.value)} />
            </View>
            <View className='form-item'>
              <Text>答案</Text>
              <Input placeholder='请输入答案' value={formState.answer1} onInput={(e) => handleInput('answer1', e.detail.value)} />
            </View>
            <View className='form-item'>
              <Text>随机问题2</Text>
              <Input placeholder='请输入问题' value={formState.question2} onInput={(e) => handleInput('question2', e.detail.value)} />
            </View>
            <View className='form-item'>
              <Text>答案</Text>
              <Input placeholder='请输入答案' value={formState.answer2} onInput={(e) => handleInput('answer2', e.detail.value)} />
            </View>
          </View>
          <View className='register' onClick={onSubmit}>
            注册
          </View>
        </View>
      ) : (
        <View style={{ color: '#727e7e', marginTop: '30px' }}>
          用户注册成功，{timeCount}s之后将前往登录页
          <View onClick={goLogin} style={{ color: '#e49463', marginTop: '10px' }}>
            立即前往
          </View>
        </View>
      )}
    </View>
  )
}

export default RegisterAccount